<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-11-08 14:44:46
 * @LastEditors: charles
 * @LastEditTime: 2021-11-08 14:58:28
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <div>数字：{{obj.num}}</div>
    <div>字符串：{{obj.msg}}</div>
  </div>
  <script>
    new Vue({
      el:'#app',
      data:{
        obj:{
          num:1
        },
        id:0
      },
      watch:{

      },
      mounted(){
        this.changeNum();
      },
      methods:{
        changeNum(){
          this.id = setInterval(() => {
            this.obj.num++
            if(this.obj.msg){
              this.obj.msg++;
            } else {
              this.obj.msg = 100;
            }
          }, 1000);
        }
      },
      beforeDestroy(){
        //销毁闭包
        clearInterval(this.id)
      }

    })
  </script>
</body>
</html>